<template>
  <van-nav-bar
    title="匹配对手"
    left-text="返回"
    left-arrow
    @click-left="onClickLeft"
  />
  <div class="user_container">
    <div class="user1 user">
      <img class="user_image" src="../../assets/image/头像1.png" alt="" />
      <span>{{ user1.name }}</span>
    </div>
    <img class="pk_image" src="../../assets/image/Vector.png" alt="" />
    <div class="user2 user">
      <img class="user_image" src="../../assets/image/头像2.jpg" alt="" />
      <span>{{ user2.name }}</span>
    </div>
  </div>
  <span class="text">匹配成功，即将进入对战……</span>
</template>

<script>
import router from "../../router";
export default {
  data() {
    return {
      getUser1InfoQueryInfo: {
        methodName: "battle_getOpponentBasicInfo",
        data: { param: window.sessionStorage.getItem("account") },
      },
      getUser2InfoQueryInfo: {
        methodName: "battle_getOpponentBasicInfo",
        data: { param: "" },
      },
      form: {},
      user1: {
        name: "",
        icon: "",
      },
      user2: {
        name: "",
        icon: "",
      },
    };
  },
  created() {
    this.toPking();
    this.init();
    this.getUser1Info();
    this.getUser2Info();
  },
  methods: {
    init() {
      this.form = JSON.parse(window.sessionStorage.getItem("pkForm"));
      console.log(this.form);
    },
    onClickLeft() {
      router.push("/connect");
    },
    toPking() {
      setTimeout(() => {
        router.push("/pking");
      }, 3000);
    },
    async getUser1Info() {
      const { data: res } = await this.$http.post(
        "/app/main",
        this.getUser1InfoQueryInfo,
        {
          headers: {
            "Content-Type": "application/json",
          },
        }
      );
      this.user1.name = JSON.parse(res.data).nickname;
    },
    async getUser2Info() {
      this.getUser2InfoQueryInfo.data.param =
        this.form.matchRelationship.opponentAccount;
      const { data: res } = await this.$http.post(
        "/app/main",
        this.getUser2InfoQueryInfo,
        {
          headers: {
            "Content-Type": "application/json",
          },
        }
      );
      this.user2.name = JSON.parse(res.data).nickname;
    },
  },
};
</script>
<style scoped>
.image {
  background: url(../../assets/image/图片底部.png);
  width: 560px;
  height: 560px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 200px auto;
}
.text {
  margin-top: 100px;
  font-size: 30px;
  display: flex;
  justify-content: center;
}
.user_container {
  margin-top: 100px;
  display: flex;
  justify-content: space-around;
  align-self: center;
}
.user_image {
  width: 100px;
  height: 100px;
  border-radius: 50%;
}
.pk_image {
  height: 100px;
}
.user {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.user span {
  font-size: 30px;
}
</style>